import { useState } from 'react';

export const App = () => {
  // number 类型
  const [count, setCount] = useState(0);
  // string 类型
  const [name, setName] = useState('Jack');
  // 数组类型
  const [likes, setLikes] = useState(['吃饭', '睡觉', '敲代码']);
  // 对象类型
  const [obj, setObj] = useState({ name: 'Rose', age: 18 });
  // jsx 类型
  const [jsx, setJsx] = useState(<div>div</div>);

  const handleClick = () => {
    // 修改count
    setCount(count + 1);
    // 修改name
    // setName('Rose');
    // 修改数组, 要创建新对象（新地址、新引用）
    // 不能这样改
    // likes[0] = '敲代码';
    // console.log(likes);
    // likes[0] = '敲代码';
    // const newLikes = [...likes];
    // setLikes(newLikes);
    // 要创建一个新对象
    // setObj({ ...obj, age: 20 });
    // obj.age = 10;
    // setObj(obj);
    // setJsx(<h1>h1</h1>);
  };

  //   const handleClick2 = () => {
  //     // 修改count
  //     setCount(count + 1);
  //   };

  return (
    <div>
      <h1>{count}</h1>
      <h1>{name}</h1>
      <h1>{likes.join('=>')}</h1>
      <h1>
        {obj.name}, {obj.age}
      </h1>
      {jsx}
      <button onClick={handleClick}>修改数据</button>
      {/* <button onClick={handleClick2}>修改基本类型数据</button> */}
    </div>
  );
};
